import React, { useEffect, useState } from 'react';
import { Button, Space, Table,Popconfirm,message,Form,Input } from 'antd';
import axios from 'axios';
import Addrole from './addrole/Addrole';
import Editrole from "./editrole/editrole"

const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  }

export default function Role() {
    const columns = [
        {
          title: '角色名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '角色代码',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '修改时间',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '修改人',
          key: 'tags',
          dataIndex: 'tags',
        },
        {
          title: '操作',
          key: 'action',
          render: ( record) => (
            <Space size="middle">
                  <Button type="primary" onClick={()=>editShow(record.id)}>编辑</Button>
                  <Popconfirm placement="top" title={"亲，确定要删除嘛？"} onConfirm={()=>confirm(record.id)} okText="是" cancelText="否">
                  <Button type="primary" danger>删除</Button>
            </Popconfirm>
              
            </Space>
          ),
        },
      ];
    const [data, setData] = useState([])
  const [displayRole, setDisplayRole] = useState("none")
  const [roleShow, setEditRoleShow] = useState("none")
  const [shopid, setShopid] = useState("")
  //修改显示
  function editShow(id) {
    setShopid(id);
    setEditRoleShow("block")
  }
  function editnone() {
    setEditRoleShow("none")
  }



    //封装渲染页面的axios
    function packageaxios() {
        axios({
            url: "http://localhost:3000/role",
            method:"get"
        }).then(res => {
            setData(res.data)
        })
    }
    //删除全局提示框
    const info = () => {
        message.info('亲，删除成功');
      };
    //渲染页面
    useEffect(() =>packageaxios(), [])

    //删除
    function confirm(id) {
        console.log("id", id);
        axios({
            url: "http://localhost:3000/role/" + id,
            method:"delete"
        }).then(res => {
            info();
            packageaxios()
        })
      }
//查
    function Addgoods(str) {
        console.log("12343", str);
        let num = {}
        for (let key in str) {
            if (str[key]) {
                num[key] = str[key];
            }
        }
        axios({
            url: "http://localhost:3000/role",
            params:num
        }).then(res => {
            console.log("res.data", res.data);
            setData(res.data)
        })
    }
   //添加页面显示
    function addroleShow() {
        setDisplayRole("block")
    }
    //添加页面隐藏
    function editroleShow() { 
        setDisplayRole("none")
    }

    return (
      
        <div>
              <div>
          
          <Form layout="inline" onFinish={Addgoods}>
            <span style={{width:"80px", lineHeight: "20px",display: "block",textAlign: "center",paddingTop:'8px',fontWeight: "bold"}}>搜索</span>
      <Form.Item
        name="name"
      >
        <Input placeholder="角色名称" />
      </Form.Item>
      <Form.Item
        name="age"
      >
        <Input
     
          type="text"
          placeholder="角色代码"
        />
      </Form.Item>
      <Form.Item >
       <Button
            type="primary"
                htmlType="submit"
          > 查询
          </Button>
</Form.Item>
            <Form.Item >
       <Button
                type="primary"
               onClick={addroleShow}
                >
   添加
          </Button>
          </Form.Item>
                </Form>
                </div>
            <Table columns={columns} dataSource={data} rowSelection={rowSelection} rowKey={(record) => `complete${record.id}`} />
        <Addrole show={displayRole} edit={editroleShow} onOk={packageaxios}></Addrole>
        <Editrole show={roleShow} id={shopid} edit={editnone} onOk={packageaxios}></Editrole>
    </div>
  )
}



